<!--
 * @FileDescription 
 * @Author lz
 * @Date 20230321 09:48:04
 * @LastEditors lz
 * @LastEditTime 20230321 09:48:04
-->
<template>
    <div class="ConBox_b">
        <div class="changing-over">
            <div class="TabBox" :class="state.selType == 1 ? 'ChickOut' : ''" @click="ChiBtn(1)">
                Add Drive Event
            </div>
            <div class="TabBox" :class="state.selType == 2 ? 'ChickOut' : ''" @click="ChiBtn(2)">
                Add Audio Event
            </div>
        </div>
        <div class="row_1">
            <div class="col_1_l">
                Event Time
            </div>
            <div class="col_1_r">
                Mon Feb 20 2023 17:49:30 GMT+0800(China Standard Time)
                <div class="UpdateBox">
                    Update Time
                </div>
            </div>
        </div>
        <div class="row_1">
            <div class="col_2_l">
                Types
            </div>
            <div class="col_2_r">
                <div class="TypesBox">
                    Critical
                </div>
                <div class="TypesBox">
                    Problem
                </div>
                <div class="TypesBox">
                    Desired
                </div>
                <div class="TypesBox">
                    Out of Scope
                </div>
            </div>
        </div>
        <div class="row_1">
            <div class="col_3_l">
                Message
            </div>
            <div class="col_3_r">

            </div>
        </div>
        <div class="row_1">
            <div class="col_4_l">
                File a ticket
            </div>
            <div class="col_4_r">
                <a-switch v-model:checked="state.checkedVal" />
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="operateBox">
            <div class="Cancel">Cancel</div>
            <div class="Submit">Submit</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue'
const state = reactive({
    selType: 0,
    checkedVal: false
});
function ChiBtn(val: number) {
    state.selType = val
}
</script>

<style scoped>
.ConBox_b {
    width: 1762px;
    height: 364px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #1B2225;
}

.changing-over {
    width: 100%;
    overflow: hidden;
    margin-top: 17px;
    margin-left: 21px;
}

.TabBox {
    width: 200px;
    border-bottom: 2px solid #626A6D;
    text-align: center;
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #A2AAAC;
    line-height: 36px;
    margin-right: 2px;
}

.ChickOut {
    width: 200px;
    color: #FFFFFF;
    background: #293036;
    border-bottom: 2px solid #BEBDBE;
}

.row_1 {
    overflow: hidden;
}

.col_1_l {
    float: left;
    width: 90px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 50px;
    margin-top: 10px;
    margin-left: 34px;
}

.col_2_l {
    float: left;
    width: 90px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 50px;
    margin-left: 34px;
    margin-top: 4px;
}

.col_1_r {
    float: left;
    width: 609px;
    height: 40px;
    background: #0C1417;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40px;
    padding-left: 11px;
    margin-top: 16px;
}

.UpdateBox {
    float: right;
    width: 132px;
    height: 28px;
    background: #2652FF;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 28px;
    text-align: center;
    margin-top: 6px;
    margin-right: 9px;
}

.col_2_r {
    float: left;
    margin-top: 10px;
}

.TypesBox {
    float: left;
    background: #181818;
    border: 2px solid #2B2B2B;
    padding: 6px 40px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    margin-right: 5px;
}

.TypesBox:hover {
    background: #a59e9e;
}

.col_3_l {
    float: left;
    width: 90px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 130px;
    margin-left: 34px;
    margin-top: 4px;
}

.col_3_r {
    float: left;
    width: 510px;
    height: 130px;
    background: rgba(14, 20, 22, 0);
    border: 1px solid #D08B6F;
    border-radius: 2px;
    margin-top: 10px;
}

.col_4_l {
    float: left;
    width: 90px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 30px;
    margin-left: 34px;
    margin-top: 4px;
}

.col_4_r {
    float: left;
    margin-top: 11px;
}

:deep().ant-switch {
    margin-right: 12px;
    border-radius: 0;
    margin-top: -3px;
    background: #40464A;
}

:deep().ant-switch-checked {
    background: #1E3C50;
}

:deep().ant-switch-handle::before {
    border-radius: 0;
    background: #9EA6A8;
}

:deep().ant-switch-checked>.ant-switch-handle::before {
    background-color: #3AA4FB;
}

:deep().ant-switch-handle {
    width: 16px;
    height: 16px;
    top: 3px;
}

.operateBox {
    position: absolute;
    right: 7px;
    bottom: 23px;
}

.Cancel,
.Submit {
    float: left;
    width: 135px;
    height: 40px;
    background: #020002;
    border: 2px solid #2F363B;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
    margin-right: 7px;
}

.Cancel:hover,
.Submit:hover {
    background: #1B2225;
}
</style>